﻿@{
    ViewBag.Title = "HTML 5 Videos";
}
@*http://msdn.microsoft.com/fr-fr/library/ie/hh924820%28v=vs.85%29.aspx*@
@section Scripts
{
    <script type="text/javascript">
        var myVideo = document.getElementById("video2");

        function playPause() {
            if (myVideo.paused)
                myVideo.play();
            else
                myVideo.pause();
        }
        function makeBig() {
            myVideo.width = 285;
        }

        function makeSmall() {
            myVideo.width = 100;
        }

        function makeNormal() {
            myVideo.width = 220;
        }
    </script>
    <
    <style type="text/css">
        #video2:hover {
            border: 2px solid green;
            cursor: move;
        }

        #video2 {
            border: 5px solid #1566a3;
            border-radius: 20px;
        }
    </style>
}

<h2>Video 1</h2>
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                Source code 1
            </a>
        </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
        <div class="panel-body">
            <pre style="font-family:Consolas;font-size:13;color:black;background:white;"><span style="color:blue;">&lt;</span><span style="color:maroon;">div</span>&nbsp;<span style="color:red;">style</span><span style="color:blue;">=</span><span style="color:blue;">&quot;</span><span style="color:red;">text-align</span>:<span style="color:blue;">center</span><span style="color:blue;">&quot;</span><span style="color:blue;">&gt;</span>
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue;">&lt;</span><span style="color:maroon;">video</span>&nbsp;<span style="color:red;">width</span><span style="color:blue;">=</span><span style="color:blue;">&quot;285&quot;</span>&nbsp;<span style="color:red;">height</span><span style="color:blue;">=</span><span style="color:blue;">&quot;150&quot;</span>&nbsp;<span style="color:red;">controls</span>&nbsp;<span style="color:red;">autoplay</span><span style="color:blue;">&gt;</span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue;">&lt;</span><span style="color:maroon;">source</span>&nbsp;<span style="color:red;">src</span><span style="color:blue;">=</span><span style="color:blue;">&quot;~/Content/Videos/TFS2013-Codeplex3.mp4&quot;</span>&nbsp;<span style="color:red;">type</span><span style="color:blue;">=</span><span style="color:blue;">&quot;video/mp4&quot;</span><span style="color:blue;">&gt;</span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Your&nbsp;browser&nbsp;does&nbsp;not&nbsp;support&nbsp;the&nbsp;video&nbsp;tag.
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue;">&lt;/</span><span style="color:maroon;">video</span><span style="color:blue;">&gt;</span>
<span style="color:blue;">&lt;/</span><span style="color:maroon;">div</span><span style="color:blue;">&gt;</span>
</pre>
        </div>
    </div>
</div>

<div style="text-align:center">
    <video id="video1" width="285" height="150" controls autoplay preload="auto" loop style="-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; ">
        <source src="~/Content/Videos/TFS2013-Codeplex3.mp4" type="video/mp4">
        <track kind="captions" src="~/Content/Videos/frTFS2013-Codeplex3.vtt" srclang="fr-fr" label="Français" default />
        Your browser does not support the video tag.
    </video>
</div>

<h2>Video 2</h2>
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                Source code 2
            </a>
        </h4>
    </div>
    <div id="display"></div>
    <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
            <pre style="font-family:Consolas;font-size:13;color:black;background:white;"><span style="color:blue;">&lt;</span><span style="color:maroon;">div</span>&nbsp;<span style="color:red;">style</span><span style="color:blue;">=</span><span style="color:blue;">&quot;</span><span style="color:red;">text-align</span>:<span style="color:blue;">center</span><span style="color:blue;">&quot;</span><span style="color:blue;">&gt;</span>
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue;">&lt;</span><span style="color:maroon;">video</span>&nbsp;<span style="color:red;">id</span><span style="color:blue;">=</span><span style="color:blue;">&quot;video2&quot;</span>&nbsp;<span style="color:red;">width</span><span style="color:blue;">=</span><span style="color:blue;">&quot;220&quot;</span><span style="color:blue;">&gt;</span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue;">&lt;</span><span style="color:maroon;">source</span>&nbsp;<span style="color:red;">src</span><span style="color:blue;">=</span><span style="color:blue;">&quot;~/Content/Video/2014&nbsp;sera&nbsp;l_année&nbsp;de&nbsp;la&nbsp;quenelle&nbsp;___.mp4&quot;</span>&nbsp;<span style="color:red;">type</span><span style="color:blue;">=</span><span style="color:blue;">&quot;video/mp4&quot;</span><span style="color:blue;">&gt;</span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Your&nbsp;browser&nbsp;does&nbsp;not&nbsp;support&nbsp;HTML5&nbsp;video.
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue;">&lt;/</span><span style="color:maroon;">video</span><span style="color:blue;">&gt;</span>
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue;">&lt;</span><span style="color:maroon;">br</span>&nbsp;<span style="color:blue;">/&gt;</span>
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue;">&lt;</span><span style="color:maroon;">button</span>&nbsp;<span style="color:red;">class</span><span style="color:blue;">=</span><span style="color:blue;">&quot;btn&nbsp;btn-xs&nbsp;btn-primary&quot;</span>&nbsp;<span style="color:red;">onclick</span><span style="color:blue;">=</span><span style="color:blue;">&quot;</span>playPause()<span style="color:blue;">&quot;</span><span style="color:blue;">&gt;</span>Play/Pause<span style="color:blue;">&lt;/</span><span style="color:maroon;">button</span><span style="color:blue;">&gt;</span>
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue;">&lt;</span><span style="color:maroon;">button</span>&nbsp;<span style="color:red;">class</span><span style="color:blue;">=</span><span style="color:blue;">&quot;btn&nbsp;btn-xs&nbsp;btn-primary&quot;</span>&nbsp;<span style="color:red;">onclick</span><span style="color:blue;">=</span><span style="color:blue;">&quot;</span>makeBig()<span style="color:blue;">&quot;</span><span style="color:blue;">&gt;</span>Big<span style="color:blue;">&lt;/</span><span style="color:maroon;">button</span><span style="color:blue;">&gt;</span>
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue;">&lt;</span><span style="color:maroon;">button</span>&nbsp;<span style="color:red;">class</span><span style="color:blue;">=</span><span style="color:blue;">&quot;btn&nbsp;btn-xs&nbsp;btn-primary&quot;</span>&nbsp;<span style="color:red;">onclick</span><span style="color:blue;">=</span><span style="color:blue;">&quot;</span>makeSmall()<span style="color:blue;">&quot;</span><span style="color:blue;">&gt;</span>Small<span style="color:blue;">&lt;/</span><span style="color:maroon;">button</span><span style="color:blue;">&gt;</span>
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue;">&lt;</span><span style="color:maroon;">button</span>&nbsp;<span style="color:red;">class</span><span style="color:blue;">=</span><span style="color:blue;">&quot;btn&nbsp;btn-xs&nbsp;btn-primary&quot;</span>&nbsp;<span style="color:red;">onclick</span><span style="color:blue;">=</span><span style="color:blue;">&quot;</span>makeNormal()<span style="color:blue;">&quot;</span><span style="color:blue;">&gt;</span>Normal<span style="color:blue;">&lt;/</span><span style="color:maroon;">button</span><span style="color:blue;">&gt;</span>
<span style="color:blue;">&lt;/</span><span style="color:maroon;">div</span><span style="color:blue;">&gt;</span>
</pre>
            <pre style="font-family:Consolas;font-size:13;color:black;background:white;"><span style="color:blue;">&lt;</span><span style="color:maroon;">script</span>&nbsp;<span style="color:red;">type</span><span style="color:blue;">=</span><span style="color:blue;">&quot;text/javascript&quot;</span><span style="color:blue;">&gt;</span>
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue;">var</span>&nbsp;myVideo&nbsp;=&nbsp;document.getElementById(<span style="color:#a31515;">&quot;video2&quot;</span>);
 
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue;">function</span>&nbsp;playPause()&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue;">if</span>&nbsp;(myVideo.paused)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;myVideo.play();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue;">else</span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;myVideo.pause();
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue;">function</span>&nbsp;makeBig()&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;myVideo.width&nbsp;=&nbsp;285;
&nbsp;&nbsp;&nbsp;&nbsp;}
 
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue;">function</span>&nbsp;makeSmall()&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;myVideo.width&nbsp;=&nbsp;100;
&nbsp;&nbsp;&nbsp;&nbsp;}
 
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue;">function</span>&nbsp;makeNormal()&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;myVideo.width&nbsp;=&nbsp;220;
&nbsp;&nbsp;&nbsp;&nbsp;}
<span style="color:blue;">&lt;/</span><span style="color:maroon;">script</span><span style="color:blue;">&gt;</span>
</pre>
        </div>
    </div>
</div>

<div style="text-align:center">
    <div style="padding-bottom:5px">
        <button class="btn btn-xs btn-primary" onclick="playPause()">Play/Pause</button>
        <button class="btn btn-xs btn-primary" onclick="makeBig()">Big</button>
        <button class="btn btn-xs btn-primary" onclick="makeSmall()">Small</button>
        <button class="btn btn-xs btn-primary" onclick="makeNormal()">Normal</button>
    </div>
    <video id="video2" width="220" poster="~/Content/images/carousel0.jpg">
        <source src="~/Content/Videos/TFS2013-Codeplex3.mp4" type="video/mp4">
        <track kind="captions" src="~/Content/Videos/frTFS2013-Codeplex3.ttml" srclang="fr-fr" label="Français" default />
        Your browser does not support HTML5 video.
    </video>
</div>
